<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" import="cn.com.dashihui.web.common.OrderCode" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <title>管理平台</title>
    <jsp:include page="../../../include/header.jsp"></jsp:include>
        <style type="text/css">
			
		 	  /*排序 */
			.querySort{
			   position:relative;
			}
			.down{
			   position: absolute;
			   top:12px;
			   display:inline-block;
			   width:10px;
			   height:12px;
			   margin-left: 8px;
			   background: url("${BASE_PATH}/static/images/sprite-arrow.png") 0 61px;
			}
		  .sort .querySort:NTH-OF-TYPE(2) .down{
			    top:-3px;
			    transform: rotateX(180deg);
			}
			.querySort:hover .down{
			   background: url("${BASE_PATH}/static/images/sprite-arrow.png") 0 21px;
			}
			
		  .downSort{
			    position: absolute;
			    top: 3px;
			    left: 3px;
			    width: 18px;
			    height: 24px;
			    opacity: 0;
			    cursor:pointer;
			}
		    .upSort {
			    position: absolute;
			    top: -15px;
			    left: 3px;
			    width: 18px;
			    height: 24px;
			    opacity: 0; 
			    cursor:pointer;
			}
		</style>
</head>
<body>
<div id="wrapper"  class="row">
	
			<div class="title-top col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">公司统计信息</div>
					<div class="panel-body hint">
						<div class="col-xs-2 col-md-2 col-lg-2">公司总数 : <span class="label label-info" id="goodsCount"></span>${ tolnumber} </div>
						<div class="col-xs-2 col-md-2 col-lg-2">入驻审核中公司 : <span class="label label-info" id="chart1State1"></span>${sjshnumber } </div>
				    	<div class="col-xs-2 col-md-2 col-lg-2">入驻公司总数 : <span class="label label-info" id="chart1State2"></span>${sjnumber } </div>
				    	<div class="col-xs-2 col-md-2 col-lg-2">未入驻公司总数 : <span class="label label-info" id="chart1State3"></span>${xjnumber } </div>
					</div>
				</div>
			</div>
		<!-- 搜索框 -->
			<div class="title-top col-lg-12">
				<label class="search-label">公司编号：</label><input type="text" id="sSeller" value="" class="form-control search-input width150" maxlength="21">
				<label class="search-label">入驻时间：</label><input type="text" id="sBeginDate" value="" class="form-control search-input width120 datetimepicker" data-format="yyyy-mm-dd" >
				<label class="search-label">至</label><input type="text" id="sEndDate" value="" class="form-control search-input width120 datetimepicker" data-format="yyyy-mm-dd" >
				<shiro:hasPermission name="dict:seller:tong:doExcel">
						<button onclick="doExcel();"  class="btn btn-success pull-right">导出</button>
					</shiro:hasPermission>
			<div class="fl-width580">
				<label class="search-label">公司电话：</label><input type="text" id="sTel" value="" class="form-control search-input width100" maxlength="21">
				 <label class="search-label">选择公司：</label>
				<select id="sSellerId"  data-tags="true" class="selectpicker pull-left p-l-5" data-width="120" data-url="${BASE_PATH}/api/sellerAll" data-isfirst="true"  data-key="sellerId:sellerName"></select>
				<button class="btn btn-success search-btn" onclick="query();">确定</button>
				<button class="btn btn-success search-btn" onclick="reset();">重置</button>
			</div>
				<div class="clearfix"></div>
			</div>
			<div class="col-lg-12 title-top">
				<div class="col-lg-12">
						<div class="text-muted single-line-text pull-left">共 <font color="#428bca" id="dataCount">0</font> 条记录</div>
						

						<div class="text-muted single-line-text pull-right">销售额： 日&nbsp;&nbsp;<input type="radio" class="radioItem" id="state1" name="state" value="1" />
						 	&nbsp;&nbsp;周&nbsp;&nbsp;<input type="radio" class="radioItem" id="state2" name="state" value="2" />
						    &nbsp;&nbsp;月&nbsp;&nbsp;<input type="radio" class="radioItem" id="state3" name="state" value="3" /></div>
				</div>
				<div class="table-responsive panel panel-default" >
					<table class="table table-noellipsis table-bordered" style="overflow:scroll;">
						<thead>
							<tr>
								<th width="100px;">公司ID</th>
								<th width="150px;">公司名称</th>
								<th width="100px;">入驻时间</th>
								<th width="100px;">公司联系人</th>
								<th width="100px;">联系电话</th>
								<th width="100px;">分公司数量</th>
								<th width="100px;">普通产品数量</th>
								<th class="sort" style="width: 100px;" >普通产品订单量
								    <a class="querySort">
								       <i class="down"></i>
								       <input type="radio" name="radioState" value="1" class="downSort" onclick="query1(1)">
								    </a>
								    <a class="querySort">
								           <i class="down"></i>
								           <input type="radio" name="radioState" value="2" class="upSort" onclick="query1(2)">
								    </a>
								</th>
								<th class="sort" style="width: 100px;" >普通销售金额
								   <a class="querySort"><i class="down">
								      </i><input type="radio" name="radioState" value="3" class="downSort" onclick="query1(3)">
								    </a>
								    <a class="querySort">
								           <i class="down"></i>
								           <input type="radio" name="radioState" value="4" class="upSort" onclick="query1(4)">
								    </a>
								</th>	
								<th width="100px;">状态</th>
								<th width="150px;">操作</th>
							</tr>
						</thead>
						<tbody id="dataList"></tbody>
					</table>
				</div>
		        	<div class="col-lg-12">
        			<div class = "pull-right">
	        			<div class="text-muted  pull-left" style="margin-top:20px; margin-right:18px;">
							<select id="pageSize" name="pageSize" class="selectpicker" data-width="100" onchange="query()" >
		    					<option value="10" selected = "selected">10条/页</option>
								<option value="15">15条/页</option>
								<option value="20">20条/页</option>
								<option value="50">50条/页</option>
								<option value="100">100条/页</option>
		    				</select>
						</div>
		        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
		        	</div>
	        	</div>
			</div>

</div>
<jsp:include page="../../../include/javascripts.jsp"></jsp:include>
<!-- 异步加载下一页数据后，用模板渲染 -->
<script type="text/html" id="dataTpl">
	{{each list as item}}
				<tr id="item{{item.id}}" data-id="{{item.id}}">
					<td>{{item.sellerId}}</td>
					<td>{{item.sellerName}}</td>
					<td>{{item.createtime }}</td>
					<td>{{item.trueName}}</td>
					<td>{{item.contact}}</td>
					<td>{{item.countStore }}</td>
					<td>{{item.countGoods }}</td>
					<td>{{item.countSell }}</td>
					<td>{{item.countMoney }}</td>
					{{if item.power==1}}
						<td>开启</td>
						{{else if item.power==2}}
						<td>关闭</td>
					{{/if}}
					{{if item.power==1}}
						<td>
							<a href="javascript:showSeller('{{item.sellerId}}');"><span class="btn">详情</span></a>
							<a href="javascript:edit('{{item.sellerId}}');"><span class="btn">编辑</span></a>
						</td>
						{{else if item.power==2}}
							<td>
								<a href="javascript:showSeller('{{item.sellerId}}');"><span class="btn">详情</span></a>
								<a href="javascript:edit('{{item.sellerId}}');"><span class="btn">编辑</span></a>
							</td>
					{{/if}}
					
				</tr>
	{{/each}}
</script>
<script type="text/javascript">
var dataPaginator;
$(query);
	 
function query(){
	var pageSize=$("#pageSize").val();
	var params = {
		pageSize:pageSize,
		sellerId:$("#sSellerId").val(),
		seller:$("#sSeller").val(),
		beginDate:$("#sBeginDate").val(),
		endDate:$("#sEndDate").val(),
		tel:$("#sTel").val()
	};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/dict/seller/tong/page",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
}
/**
 * 此排序与默认排序冲突故分成二方法
 */
 function query1(index){
	 var pageSize=$("#pageSize").val();
		var params = {
			pageSize:pageSize,
			sellerId:$("#sSellerId").val(),
			seller:$("#sSeller").val(),
			beginDate:$("#sBeginDate").val(),
			endDate:$("#sEndDate").val(),
			tel:$("#sTel").val(),
			index:index
		};
		if(dataPaginator){
			dataPaginator.destroy();
		}
		dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/dict/seller/tong/page1",params,function(result){
			//设置显示最新的数据数量
			$("#dataCount").html(result.object.totalRow);
			//根据模板渲染数据并填充
			$("#dataList").empty().append(template("dataTpl",result.object));
		});
	}
function reset(){
	$("#sSeller").val("");$("#sBeginDate").val("");$("#sEndDate").val("");$("#sTel").val("");
	$("#sSellerId").val("");$("#sSellerId").trigger("change"); 
}
var showSellerDialog;
function showSeller(sellerId){
	showSellerDialog = Kit.dialog("查看详情","${BASE_PATH}/dict/seller/detail?sellerId="+sellerId,{closable:true}).open();
}
var editDialog;
function edit(sellerId){
	editDialog = Kit.dialog("编辑公司","${BASE_PATH}/dict/seller/tong/toEdit?sellerId="+sellerId,{closable:true,size:"size-wide:100px"}).open();
}
function onEditSuccess(newObject){
	$("#item"+newObject.id).replaceWith(template("dataTpl",{"list":[newObject]}));
} 
$(document).ready(function() {
    $(".radioItem").change(function() {
    	 var $selectedvalue = $("input[name='state']:checked").val();
    	var params = {
    			pageSize:10,
    			sellerId:$("#sSellerId").val(),
    			seller:$("#sSeller").val(),
    			beginDate:$("#sBeginDate").val(),
    			endDate:$("#sEndDate").val(),
    			tel:$("#sTel").val(),
    			date:$selectedvalue
    		};
    		if(dataPaginator){
    			dataPaginator.destroy();
    		}
    		dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/dict/seller/tong/xspage",params,function(result){
    			//设置显示最新的数据数量
    			$("#dataCount").html(result.object.totalRow);
    			//根据模板渲染数据并填充
    			$("#dataList").empty().append(template("dataTpl",result.object));
    		});
    });
});
function doExcel(){
	var $selectedvalue = $("input[name='state']:checked").val();
	if($selectedvalue==undefined){
		$selectedvalue =0;
	}
	var sellerId = $("#sSellerId").val(), seller = $("#sSeller").val(), beginDate = $("#sBeginDate").val(), endDate = $("#sEndDate").val(), tel = $("#sTel").val();
	window.location.href="${BASE_PATH}/dict/seller/tong/doExcel?seller="+seller+"&sSellerId="+sSellerId+"&beginDate="+beginDate+"&endDate="+endDate+"&tel="+tel+"&date="+$selectedvalue;
}
$("#sBeginDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    pickerPosition:'bottom-right',
    autoclose:true,
}).on("click",function(){
	var d2=new Date();
	var d=$("#sEndDate").val();
	if(d==""){
		 $("#sBeginDate").datetimepicker("setEndDate",d2);
	}else{
		var d1=new Date(d); 
		d1.setDate(d1.getDate()-1);
		if(d1>d2){
	  	 	 $("#sBeginDate").datetimepicker("setEndDate",d2);
		}else{
			 $("#sBeginDate").datetimepicker("setEndDate",d1);
		}
	}
});

$("#sEndDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    autoclose:true,
	}).on("click",function(){
		var d=$("#sBeginDate").val();
		var d1=new Date(d); 
		d1.setDate(d1.getDate()+1); 
		$("#sEndDate").datetimepicker("setStartDate",d1);
	});
	
 $(document).on("click","#sEndDate",function(){
    	$('#sEndDate').datetimepicker('show');
    });

$(document).on("click","#sBeginDate",function(){
	$('#sBeginDate').datetimepicker('show');
});


/**
 * 产品订单量销售额单选图片点击切换
 */
var querySort=document.getElementsByClassName("querySort");//点击区域
var down=document.getElementsByClassName("down");
for(var i=0;i<querySort.length;i++){
	   //给每个class添加id标识(当索引)区分每个class
	   querySort[i].id=i;	   
	   //鼠标点击改变背景图片偏移
	   querySort[i].onclick=function(){
		   //当前索引
		   var index=this.id;
		   for( j=0;j<down.length;j++){
			   down[j].style.backgroundPosition="0px 61px";
		   }
		 //改变索引为当前的class背景图片偏移位置
		   down[index].style.backgroundPosition="0px 21px";
	   }
}
</script>
</body>
</html>